<template>
    <v-card class="content-bg card mx-auto" :max-width="card.maxWidth" flat tile router
        :to="`/liveRoom/${live.roomId}`">
        <v-img :src="live.cover" style="height: 160px;"> <v-chip label>
                {{ live.tag }}
            </v-chip></v-img>
        <v-row no-gutters>
            <v-col cols="2" v-if="card.type != 'noAvatar'">
                <v-list-item class="pl-0 pt-3" router :to="`/channels/${channel}`">
                    <v-list-item-avatar>
                        <v-img v-if="live.avatar !== 'no-photo.jpg'" class="elevation-6" :src="live.avatar"></v-img>
                        <v-avatar v-else color="red">
                            <span class="white--text headline ">
                                {{ live.nickName.split('')[0].toUpperCase() }}</span>
                        </v-avatar>
                    </v-list-item-avatar>
                </v-list-item>
            </v-col>
            <v-col >
                <v-card-title class="pl-2 pt-3 subtitle-1 font-weight-bold titleBox" style="line-height: 2.8rem">
                    {{ live.preview }}
                    </v-card-title>
                <v-card-subtitle class="pl-2 pb-0">
                    {{ live.nickName }}
                    <v-icon>
                        mdi-circle-small</v-icon>
                    {{ live.onlineCount }} <v-icon :small="true">mdi-account</v-icon>
                </v-card-subtitle>
            </v-col>
        </v-row>
    </v-card>
</template>

<script>
import moment from "moment";
export default {
    name: "VideoCard",
    props: {
        live: {
            type: Object,
            required: true,
        },
        channel: {
            type: Number,
            required: true,
        },
        card: Object,
    },
    data() {
        return {

        };
    },
    methods: {
        dateFormatter(date) {
            return moment(date).locale('zh-cn').fromNow();
        },
    },
};
</script>

<style>
.titleBox{
    max-height: 60px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>